import { computerCss, computerWidthHeightTopLeft } from './unit.js'
import $ from 'jquery'

function ImageDom(data) {
  if (data.layout != 'fill') {
    computerWidthHeightTopLeft(data)
  }
  // data.image = 'http://192.168.1.190:8848/ord?file:^A1-3F.png';
  $(
    "<img style='display:none' id='hideImage' src='/ord/" + data.image + "'>"
  ).appendTo($('#main'))

  var imgWidth = $('#hideImage').width()
  var imgHeight = $('#hideImage').height()
  $('#hideImage').remove()

  let dom = ''
  if (data.layout == 'fill') {
    dom +=
      '<div id=' +
      data.id +
      ' style=position:absolute;overflow:hidden;width:100%;height:100%;' +
      '>'
  } else {
    dom +=
      '<div id=' +
      data.id +
      ' style=position:absolute;overflow:hidden;' +
      computerCss(
        [
          {
            width: 'width',
            height: 'height',
            left: 'left',
            top: 'top',
          },
        ],
        data,
        'px'
      ) +
      '>'
  }

  dom +=
    '<img ondragstart="return false;" id="img' +
    data.id +
    '" src="/ord/' +
    data.image +
    '" style="border:0;display:block;' +
    computerWidthHeight(data, imgWidth, imgHeight) +
    '">'
  dom += '</div>'

  return dom
}

function computerWidthHeight(data, imgWidth, imgHeight) {
  if (data.scale == 'none') {
    var width = imgWidth + 'px'
    var height = imgHeight + 'px'
    var marginLeft = (data.width - imgWidth) / 2 + 'px'
    var marginTop = (data.height - imgHeight) / 2 + 'px'
    return (
      'width:' +
      width +
      ';height:' +
      height +
      ';margin-left:' +
      marginLeft +
      ';margin-top:' +
      marginTop +
      ';'
    )
  } else if (data.scale == 'Fit Ratio') {
    var width, height, marginLeft, marginTop
    var mayHeight = (data.width * imgHeight) / imgWidth
    if (mayHeight <= data.height) {
      width = data.width + 'px'
      height = mayHeight.toFixed(3) + 'px'
      marginLeft = 0
      marginTop = ((data.height - mayHeight) / 2).toFixed(4) + 'px'
    } else {
      height = data.height + 'px'
      width = ((data.height * imgWidth) / imgHeight).toFixed(3) + 'px'
      marginTop = 0
      marginLeft = ((data.width - parseInt(width)) / 2).toFixed(4) + 'px'
    }
    return (
      'width:' +
      width +
      ';height:' +
      height +
      ';margin-left:' +
      marginLeft +
      ';margin-top:' +
      marginTop +
      ';'
    )
  } else if (data.scale == 'Fit Width') {
    var width = data.width + 'px'
    var height = imgHeight + 'px'
    var marginLeft = 0
    var marginTop = ((data.height - imgHeight) / 2).toFixed(4) + 'px'
    return (
      'width:' +
      width +
      ';height:' +
      height +
      ';margin-left:' +
      marginLeft +
      ';margin-top:' +
      marginTop +
      ';'
    )
  } else if (data.scale == 'Fit Height') {
    var width = imgWidth + 'px'
    var height = data.height + 'px'
    var marginTop = 0
    var marginLeft = ((data.width - imgWidth) / 2).toFixed(4) + 'px'
    return (
      'width:' +
      width +
      ';height:' +
      height +
      ';margin-left:' +
      marginLeft +
      ';margin-top:' +
      marginTop +
      ';'
    )
  } else if (data.scale == 'Fit') {
    var width = data.width + 'px'
    var height = data.height + 'px'
    var marginLeft = 0
    var marginTop = 0
    return (
      'width:' +
      width +
      ';height:' +
      height +
      ';margin-left:' +
      marginLeft +
      ';margin-top:' +
      marginTop +
      ';'
    )
  }
}

function buildPropertyNiagaraToCss() {}

export default ImageDom
